const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    mode: 'development',
    plugins:[
        // 在内存中生成html页面的插件
        new htmlWebpackPlugin({
            // 指定模板页面，可以根据指定的页面路径生成内存中的页面
            template: path.join(__dirname,'./src/index.html'),
            filename: 'index.html'   // 指定生成的页面的名称
        })
    ],
    module:{ // 用于配置第三方模块加载器
        rules:[
            // 配置处理 .css 文件的第三方loader 规则
            //npm i style-loader css-loader -D
            {test:/\.css$/,use:['style-loader','css-loader']},
            //npm i less-loader less -D
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            //npm i sass-loader node-sass -D
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //npm i url-loader file-loader -D
            // limit给定的值，单位：byte,图片大小 小于limit值，则不转换为base64格式
            // 大于等于limit值则转换。
            // name给定图片名字，hash哈希值区分同名图片，[hash:6]截取6位，[name]原来的名字
            {test:/\.(jpg|png|jpeg|gif|bmp)$/,use:['url-loader?limit=46482&name=[hash:6]-[name].[ext]']},
            //npm i boorstrap -S 安装bootstrap
            //npm i popper -S
            // 字体文件处理
            {test:/.(ttf|eot|svg|woff|woff2)$/,use:['url-loader']},
            // exclude 必须排除node_modules里导入的.js文件，否则打包速度会非常慢
            {test:/.js$/,use:['babel-loader'],exclude:/node_modules/},
        ]
    }
}

/* 以上代码简化 webpack ./src/main.js ./dist/bundle.js */

// 使用 webpack-dev-server 这个工具，来实现自动打包编译功能
// npm i webpack -D
// npm i webpack-cli -d
// webpack-dev-server 配置pack.json里"scripts": {dev}，
// "dev": "webpack-dev-server --open --port 300 --contentBase src --hot"
// 运行 npm run dev 注意dev可以自定义.  --hot ：以打补丁的方式实现实时修改
// npm i webpack-dev-server -D
// npm i html-webpack-plugin -D



// npm install xxxx -d 安装在dependencies 
// npm install xxxx -D 安装在"devDependencies"